.slider{
  margin-bottom: 16px;
  box-sizing: border-box;
  color: rgba(0,0,0,.85);
  font-size: 14px;
  font-variant: tabular-nums;
  line-height: 1.5715;
  list-style: none;
  font-feature-settings: "tnum";
  position: relative;
  height: 12px;
  padding: 4px 0;
  cursor: pointer;
  touch-action: none;
  .sliderTrack {
    position: absolute;
    border-radius: 2px;
    transition: background-color .3s;
    width: 100%;
  }
  .sliderMark{
    position: absolute;
    width: 100%;
    height: 4px;
    background: 0 0;
    .sliderMarkText{
      position: absolute;
      display: inline-block;
      color: rgba(0,0,0,.45);
      text-align: center;
      word-break: keep-all;
      cursor: pointer;
      user-select: none;
      font-size: xx-small;
      transform: translateX(-50%);
    }
  }
  .sliderStep{
    position: absolute;
    width: 100%;
    height: 4px;
    background: 0 0;
    .sliderHandle{
      position: absolute;
      background-color: red;
      border-width: 2px;
      border-style: solid;
      border-color: white;
      border-radius: 50%;
      cursor: pointer;
      transform: translateX(-50%);
      transition: border-color .3s,box-shadow .6s,transform .3s cubic-bezier(.18,.89,.32,1.28);
    }
  }


}

